<template>
  <div class="page">
    <HeaderCom isDetail />
    <div class="content side-card">
      <div>
        <div class="edit-box" v-if="!isEdit">
          <div style="cursor: pointer" @click="handleEdit">
            <svg-icon icon-class="edit" style="margin-right: 5px" size="20px"></svg-icon>
            <span>编辑</span>
          </div>
        </div>
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon label-width="auto" class="demo-ruleForm">
          <el-form-item label="头像" prop="avatar">
            <el-upload v-if="isEdit" class="avatar-uploader" :show-file-list="false" :http-request="beforeAvatarUpload">
              <img v-if="imageUrl" class="avatar-uploader" :src="imageUrl" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
            <img v-else class="avatar-uploader" :src="imageUrl || avatar" />
          </el-form-item>
          <el-form-item label="昵称" prop="userName">
            <el-input
              v-if="isEdit"
              class="reply-box-textarea"
              v-model="ruleForm.nickName"
              type="text"
              autocomplete="off"
            />
            <div v-else>{{ ruleForm.nickName }}</div>
          </el-form-item>
          <el-form-item label="邮箱" prop="password">
            <div>{{ ruleForm.email }}</div>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-if="isEdit" class="radio-box" v-model="ruleForm.sex">
              <el-radio value="0" size="large">男</el-radio>
              <el-radio value="1" size="large">女</el-radio>
            </el-radio-group>
            <div v-else>{{ ruleForm.sex == 0 ? '男' : '女' }}</div>
          </el-form-item>
          <el-button v-if="isEdit" type="primary" class="loadmore-btn" :loading="loading" @click="handleSave"
            >保存</el-button
          >
          <el-button v-if="isEdit" @click="handleCancle">取消</el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { uploadImg } from '@/api/upload';
import { getUserInfo, savaUserInfo } from '@/api/user.js'; // 获取用户信息，保存用户信息
import SvgIcon from '@/components/svgIcon/index.vue';
import HeaderCom from '@/pages/components/header/index.vue';
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';
import avatar from '/public/images/default-avatar.png';
const ruleForm = ref({});
const imageUrl = ref('');
const isEdit = ref(false);
const loading = ref(false);

const handleEdit = () => {
  isEdit.value = !isEdit.value;
};

const beforeAvatarUpload = async (file) => {
  //判断头像大小
  const type = file.file.type;
  const size = file.file.size;
  const typeList = ['image/png', 'image/jpg', 'image/jpeg'];
  if (!typeList.includes(type)) {
    ElMessage.error('请上传png/jpg/jpeg格式的图片');
  }
  const isLt2M = size / 1024 / 1024 > 2;
  if (isLt2M) {
    ElMessage.error('请上传小于2M的图片');
  }
  const res = await uploadImg(file.file);
  if (res.code == 200) {
    imageUrl.value = res.data;
  }
};

const queryUserInfo = async () => {
  const res = await getUserInfo();
  if (res.code == 200) {
    ruleForm.value = res.data;
    imageUrl.value = res.data.avatar;
  }
};

const handleSave = async () => {
  const params = {
    ...ruleForm.value,
    avatar: imageUrl.value,
  };
  loading.value = true;
  const res = await savaUserInfo(params);
  if (res.code == 200) {
    ElMessage.success('保存成功');
    queryUserInfo();
    isEdit.value = false;
  }
  loading.value = false;
};

const handleCancle = () => {
  isEdit.value = false;
};

onMounted(() => {
  queryUserInfo();
});
</script>
<style scoped lang="scss">
.page {
  height: 100%;

  .edit-box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .content {
    padding: 30px;
    box-sizing: border-box;
    width: 60%;
    margin: 100px auto;
    position: sticky;
    top: 100px;
  }

  .avatar-uploader {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px dashed var(--text-color);
    margin: 0 10px;
  }

  .reply-box-textarea {
    width: 60%;
    height: 100%;
    padding: 5px 10px;
    border-radius: 6px;
    background: var(--comment-color);
    font-size: 12px;
    line-height: 38px;
    color: var(--text-color);
    resize: none;
    outline: none;
  }

  .radio-box {
    padding: 5px 10px;
    position: relative;
    top: -8px;
  }

  .loadmore-btn {
    background: var(--primary-color);
    color: var(--grey-3);
    outline: none;
    border-color: var(--primary-color);
  }
}
</style>
